<template>
  <view>
    <view>
      <view class="smart-container">1.容器</view>
	
	<navigator url="/pages/components/view/view" class="smart-panel-h">
			<text>view视图</text>
		</navigator>
		
      <view hidden="true" class="smart-panel-h" @click="goDetailPage('api')">
        <text>scorll-view滚动视图</text>
      </view>

      <view hidden="true" class="smart-innel-panel" @click="goDetailPage('demospage')">
        <text>swiper可滑动视图</text>
      </view>
	  <view class="smart-container">2.基础内容</view>
<navigator url="/pages/components/text/text" class="smart-panel-h">
	      <text>text文本编辑</text>
	    </navigator>
		<navigator url="/pages/components/icon/icon" class="smart-panel-h">
		      <text>icon图标</text>
		    </navigator>
	  </view>
	  <view class="smart-container">3.表单组件</view>
	 <navigator url="/pages/components/button/button" class="smart-panel-h">
	      <text>button按钮</text>
	    </navigator>
		<navigator url="/pages/components/checkbox/checkbox" class="smart-panel-h">
		    <text>check多选框</text>
		  </navigator>
		 <navigator url="/pages/components/label/label" class="smart-panel-h">
		      <text>label标签组件</text>
		    </navigator>
			<navigator url="/pages/components/input/input" class="smart-panel-h">
			    <text>input输入框</text>
			  </navigator>
			 <navigator url="/pages/components/textarea/textarea" class="smart-panel-h">
			      <text>tex多行文本输入</text>
			    </navigator>
				<navigator url="/pages/components/form/form" class="smart-panel-h">
				    <text>form表单</text>
				  </navigator>
		  <view class="smart-container">4.导航组件</view>
	 <navigator url="/pages/components/navigator/navigator" class="smart-panel-h">
	      <text>navigate</text>
	    </navigator>
</view>
  
</template>



<script>
export default {
  data() {
    return {}
  },
  methods: {
    goDetailPage(e) {
      if (typeof e === 'string') {
        uni.switchTab({
          url: '/pages/tabBar/' + e + '/' + e
        });
      } else {
        uni.switchTab({
          url: e.url
        });
      }
    }
  }
}
</script>


<style>
.smart-innel-panel{
	background-color: #aa99ff;
	flex-direction: row;
	align-items: center;
	padding: 12px;
	margin-bottom: 2px;
}
</style>
